<template>
  <view :class="theme">
    <view class="mt-50 ai-center lh-2">
      <text class="color-17 fs-28">待支付(元)</text>
      <text class="color-3 fs-48 fw-700">￥{{ goodsInfo.goods_price || 0 }}</text>
    </view>

    <radio-group @change="checkPayOption" class="m-40 bg-2 p-40 br-30">
      <text class="color-6 fs-32 mb-40">选择支付方式</text>
      <label v-for="(option, index) in payOptions" :key="option.key" class="fd-row ai-center pt-30 pb-30">
        <u-icon class="bg-1 br-8 p-4" size="48" color="#fff" :name="option.icon" />
        <view class="f1 ml-20">
          <text class="fs-28 color-4">{{ option.text }}支付</text>
          <label v-if="option.key === 'bankCard'"
            @click="uniNavigator({ url: '/pages/client/main/cards?enabled_select_card=1' })" class="mt-16">
            <text class="color-9 mr-20">{{ card.card_no || "选择银行卡" }}</text>
            <u-icon size="28" color="#999" name="arrow-right" />
          </label>
        </view>
        <radio :checked="index === payOptionsIndex" :value="String(index)" :color="$config.COLOR_5" />
      </label>
    </radio-group>
    <button @click="pay" style="margin: 300rpx 44rpx 150rpx;" hover-class="tap-hover"
      class="bg-6 color-2 fs-36">确认付款</button>

    <u-popup v-model="showPopup.captcha" @input="changePopup($event, 'captcha')" mode="center" closeable
      :mask-close-able="false" close-icon-color="#333">
      <view class="br-20 bg-2 p-30" style="width: 600rpx;">
        <label class="fs-36 fw-700">验证手机号</label>
        <text class="mt-30">短信验证码已发送至</text>
        <text class="mt-20 fs-32">{{ formatPhoneNumber(card.mobile) }}</text>
        <view class="mt-30 fd-row ai-center" style="border-bottom: 2rpx solid #eee;">
          <input v-model="captcha.value" class="f1 color-3 pl-30 pr-30 height-88" placeholder="请输入验证码" type="number"
            maxlength="6" placeholder-class="color-9">
        </view>
        <button @click="submitCaptcha" :disabled="!captcha.value" class="mt-50 fs-36 fw-700 br-50 color-2 bg-6"
          hover-class="tap-hover" style="line-height: 88rpx; width: 540rpx;">确认</button>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { formatPhoneNumber, uniNavigator } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { $config = {} } = getApp().globalData || {};
const { theme, card, address } = useMapState(["theme", "card", "address"]);
const goodsInfo = ref<AnyObject>({});
const payOptions: AnyObject[] = [
  {
    key: "bankCard",
    icon: "/static/img/icon-bankCard.svg",
    text: "银行卡",
    channel: 8
  },
  {
    key: "aliPay",
    icon: "zhifubao",
    text: "支付宝",
    channel: 1
  },
  // {
  //   key: "weChat",
  //   icon: "weixin-fill",
  //   text: "微信"
  // },
];

const captcha = reactive({
  errorMessage: "验证码输入有误",
  disabled: false,
  value: "",
  field: "code",
  rule: /^[0-9]{4,8}$/
});

const showPopup = reactive({
  captcha: false,
});

onLoad(({ id }: any) => {
  uni.request({
    url: "/goodsDetail",
    data: { id },
    success({ data }: any) {
      goodsInfo.value = data;
    }
  })
});

let payOptionsIndex = 0;
const checkPayOption = (e: any) => {
  payOptionsIndex = e.detail.value;
}

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}

const pay = () => {
  if (!payOptionsIndex && !card.value.id) {
    uni.showToast({ icon: "none", title: "请选择支付银行卡" });
    return;
  }
  uni.showToast({ icon: "loading", mask: true });
  uni.request({
    url: "/paymentInfo",
    data: {
      channel: payOptions[payOptionsIndex].channel,
      bank_id: card.value.id,
      order_type: 4,
      goods_id: goodsInfo.value.id,
      address_id: address.value.id,
    },
    success({ data }: any) {
      uni.hideToast();
      uniNavigator({ url: data.url });
    }
  });
}

const submitCaptcha = () => {
  if (!captcha.rule.test(captcha.value)) {
    uni.showToast({ icon: "none", title: "验证码输入有误" });
    return;
  }
  uni.showToast({ icon: "loading", mask: true });
  uni.request({
    url: "/bankConfirmPay",
    data: { code: captcha.value },
    success() {
      showPopup.captcha = false;
      captcha.value = "";
      uni.redirectTo({ url: "/pages/client/modules/orders" });
      uni.hideToast();
    }
  });
}
</script>

<style lang="scss" scoped>
// scss
::v-deep {
  radio {
    transform: scale(0.9);
  }
}
</style>